@import "../base/reset.less";
@import "../base/colors.less";
@import "../base/spacing.less";
@import "../base/typography.less";
@import "../components/inputs.less";
@import "../components/buttons.less";
@import "../utils/decorators.less";

* {
  box-sizing: border-box;
}

html,
body,
main {
  background: #fff;
}

body {
  &:extend(.system-font);
  font-size: 14px;
}

.header {
  position: sticky;
  top: 0;
  z-index: 2;
}

h1 {
  padding: 0.3rem 0.5rem;
  background: #8bc34a;
  color: #204a10;
  font-weight: normal;
  height: 40px;
}

#filter {
  position: absolute;
  top: 10px;
  right: 10px;

  input {
    width: 400px;
    border-color: #33691e;
  }
}

nav {
  border-bottom: 1px solid #33691e;
  background: #8bc34a;
  padding: 0.2rem 0.4rem 0;
  height: 28px;

  a {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;

    &:hover {
      background: rgba(255,255,255,0.25);
    }
  }

  a.active {
    background: #fff;
    border-color: #33691e;
    position: relative;

    &:after {
      content: '';
      display: block;
      position: absolute;
      background: #fff;
      left: 0;
      width: 100%;
      bottom: -1px;
      height: 1px;
    }
  }
}

main {
  .gray {
    color: #bbb;
  }

  table {
    thead {
      font-weight: bold;

      td {
        position: sticky;
        top: 68px;
        background: #fff;
        border-bottom: 1px solid #ddd;
      }
    }

    tbody {
      tr:hover {
        background: #eee;
      }
      td:hover {
        background: #ddd;
      }
    }

    td {
      padding: 10px;
      border-right: 1px solid #ddd;
    }
  }

  section {
    padding: 1rem;

    &.columns {
      display: flex;

      & > div {
        margin-right: 1rem;
      }
    }
  }

  .peers > div {
    padding: 0.1rem 0;
    font-family: Consolas, 'Lucida Console', Monaco, monospace;
  }

  .log tbody td {
    cursor: pointer;
  }
}

td {
  padding-right: 10px;
}